<template>
  <div class="content">
    <!-- 左侧设置 -->
    <div class="leftNav">
      <div class="menu">选择题</div>
      <div class="navfl">
        <div class="typebtns">
          <el-button
            type="primary"
            icon="el-icon-circle-check"
            @click="addQuestion(1)"
            size="small "
            >单选题</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-check"
            size="small "
            @click="addQuestion(2)"
            >多选题</el-button
          >
        </div>
      </div>
      <div class="menu">填空题</div>
      <div class="navfl">
        <div class="typebtns">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="small "
            @click="addQuestion(3)"
            >填空题</el-button
          >
        </div>
      </div>
      <div class="menu">简答题</div>
      <div class="navfl">
        <div class="typebtns">
          <el-button
            type="primary"
            icon="el-icon-edit-outline"
            @click="addQuestion(4)"
            size="small "
            >简答题</el-button
          >
        </div>
      </div>
    </div>
    <!-- 右侧试题 -->
    <!-- 加载 -->
    <div class="container" ref="questionContainer" v-loading="msgLoading">
      <div class="box">
        <el-input
          v-input-restrict
          placeholder="添加问卷标题"
          v-model="survey.surveyName"
          class="bode ti"
        ></el-input>
        <div class="titleborder">
          <wangEditor
            v-model="survey.surveyDescription"
            :ossType="4"
            :isfullscreen="false"
            placeholder="请输入问卷说明..."
          ></wangEditor>
        </div>
      </div>
      <!-- 试题 -->
      <div
        class="questionbox"
        v-for="(item, index) in survey.questionList"
        :key="index"
      >
        <!-- 题目标题 -->
        <div
          v-if="item.questionType != 3"
          :class="
            item.requiredFlag == 1
              ? 'required questiontitle'
              : 'questiontitle titspace'
          "
        >
          <span >{{ index + 1 }}、</span>
          <div style="display: flex;align-items: baseline;">
            <span
            v-html="item.questionName"
            style="display: flex"
            class="noneinput"
          ></span>
          <span style="margin-left: 10px">
            <el-tag type="success">{{
              typeList[item.questionType - 1]
            }}</el-tag>
          </span>
          <span class="updatebtnsother">
            <el-tooltip
              class="item"
              effect="dark"
              content="修改"
              placement="top-start"
            >
              <el-button
                type="warning"
                icon="el-icon-edit-outline"
                size="small"
                @click="setQuestion(index)"
                class="btnitem"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="top-start"
            >
              <el-popconfirm
                title="确定删除该题目吗？"
                @confirm="delQuestion(index)"
              >
                <el-button
                  slot="reference"
                  type="danger"
                  icon="el-icon-delete"
                  size="small"
                  class="btnitem"
                  :disabled="select && !item.addDisable"
                ></el-button>
              </el-popconfirm>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="上移"
              placement="top-start"
            >
              <el-button
                type="success"
                icon="el-icon-top"
                size="small"
                class="btnitem"
                @click="upQuestion(index)"
                :disabled="select"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="下移"
              placement="top-start"
            >
              <el-button
                type="success"
                icon="el-icon-bottom"
                size="small"
                class="btnitem"
                @click="downQuestion(index)"
                :disabled="select"
              ></el-button>
            </el-tooltip>
          </span>
          </div>
          
        </div>
        <div v-else class="multTitle">
          <div class="gapFill">
            <div
              :class="
                item.requiredFlag == 1
                  ? 'required questiontitle'
                  : 'questiontitle titspace'
              "
            >
              {{ index + 1 }}、
              <div style="display: flex; flex-wrap: wrap">
                <div
                  v-for="(o, i) of item.questionNameList"
                  :key="i"
                  style="display: flex; align-items: center"
                >
                  <div
                    v-if="o.name != '</p>'"
                    style="display: flex; align-items: center"
                  >
                    <p v-html="o.name" class="textstyle"></p>
                    <el-input
          v-input-restrict
                      v-if="i != item.questionNameList.length - 1"
                      disabled
                      placeholder="请输入内容"
                      style="
                        width: 120px;
                        min-width: 120px;
                        margin-left: 5px;
                        margin-right: 10px;
                      "
                    ></el-input>
                  </div>
                </div>
              </div>
            </div>

            <span style="margin-left: 10px">
              <el-tag type="success">{{
                typeList[item.questionType - 1]
              }}</el-tag>
            </span>
          </div>
          <span class="updatebtns">
            <el-tooltip
              class="item"
              effect="dark"
              content="修改"
              placement="top-start"
            >
              <el-button
                type="warning"
                icon="el-icon-edit-outline"
                size="small"
                @click="setQuestion(index)"
                class="btnitem"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="top-start"
            >
              <el-popconfirm
                title="确定删除该题目吗？"
                @confirm="delQuestion(index)"
              >
                <el-button
                  slot="reference"
                  type="danger"
                  icon="el-icon-delete"
                  size="small"
                  class="btnitem"
                  :disabled="select && !item.addDisable"
                ></el-button>
              </el-popconfirm>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="上移"
              placement="top-start"
            >
              <el-button
                type="success"
                icon="el-icon-top"
                size="small"
                class="btnitem"
                @click="upQuestion(index)"
                :disabled="select"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="下移"
              placement="top-start"
            >
              <el-button
                type="success"
                icon="el-icon-bottom"
                size="small"
                class="btnitem"
                @click="downQuestion(index)"
                :disabled="select"
              ></el-button>
            </el-tooltip>
          </span>
        </div>
        <div
          v-if="item.questionDescription"
          style="padding-left: 20px; font-size: 12px; color: #ddd"
        >
          {{ item.questionDescription }}
        </div>
        <!-- 选项值 -->
        <div v-if="item.questionType == 1">
          <el-radio-group>
            <div v-for="(e, index) in item.optionList" :key="index">
              <div class="flleft">
                <el-radio :label="e.optionName" disabled>{{
                  e.optionName
                }}</el-radio>

                <div
                  :class="e.requiredFlag ? 'required fl' : 'fl'"
                  v-if="e.fillFlag == 1"
                >
                  <el-input
          v-input-restrict placeholder="请输入内容" disabled></el-input>
                </div>
              </div>

              <div style="padding-left: 40px">
                <img
                  :src="e.optionPicUrl"
                  alt=""
                  v-if="e.optionPicUrl"
                  style="width: 40px"
                />
              </div>
            </div>
          </el-radio-group>
        </div>
        <div v-if="item.questionType == 2">
          <div v-for="(e, index) in item.optionList" :key="index">
            <div class="flleft">
              <el-checkbox :label="e.title" disabled>{{
                e.optionName
              }}</el-checkbox>

              <div
                :class="e.requiredFlag ? 'required fl mr' : 'fl mr'"
                v-if="e.fillFlag == 1"
              >
                <el-input
          v-input-restrict placeholder="请输入内容" disabled></el-input>
              </div>
            </div>

            <div style="padding-left: 40px">
              <img
                :src="e.optionPicUrl"
                alt=""
                v-if="e.optionPicUrl"
                style="width: 40px"
              />
            </div>
          </div>
        </div>
        <!-- 简答题 -->
        <div v-if="item.questionType == 4">
          <textarea
            cols="140"
            rows="8"
            style="border: 1px solid #ddd; margin-top: 10px"
            disabled
          ></textarea>
        </div>
        <!-- 弹框 -->
        <Popup
          :ref="`popup_${index}`"
          @sendData="getData"
          style="margin-top: 10px"
        ></Popup>
      </div>
      <!-- 最后创建 -->
      <div class="endconfirm">
        <el-button type="primary" @click="updateover">完成编辑</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  Questionmsg,
  confirmQuestion,
} from "../../api/questions/updatequestion";
import wangEditor from "@/components/wangEditor.vue";
import Popup from "./components/popup.vue";
import log from "../monitor/job/log";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
export default {
  name: "ProjectAddquestion2",
  components: { Popup, quillEditor, wangEditor },
  data() {
    return {
      survey: {
        id: 0,
        surveyName: "",
        surveyDescription: "",
        startTime: null,
        endTime: null,
        questionList: [],
      },
      questionList: [],
      typeList: ["单选题", "多选题", "填空题", "简答题"],
      updateindex: undefined,
      select: undefined,
      istrue: undefined,
      state: undefined,
      msgLoading: true,
    };
  },

  created() {
    this.survey.id = this.$route.query.id;
    this.select = this.$route.query.select;
    // 使用问卷id获取问卷详情
    this.getMsg(this.survey.id);
  },
  mounted() {},

  methods: {
    // 获取试题
    getData(val, index, inse) {
      this.survey.questionList.splice(index, 1, val);
      if (!inse) {
        this.pushQuestion();
      }
    },
    // 修改题目
    setQuestion(index) {
      let obj = this.survey.questionList[index];
      obj.updateindex = index;
      this.$refs[`popup_${index}`][0].show(obj, this.select);
      this.updateindex = index;
    },
    // 删除题目
    delQuestion(index) {
      this.survey.questionList.splice(index, 1);
    },
    // 新增题
    addQuestion(val) {
      this.updateindex = this.survey.questionList.length;
      let obj;
      if (val == 3) {
        obj = {
          surveyId: this.survey.id,
          questionType: val,
          questionName: "",
          questionInfoName: "",
          questionDescription: undefined,
          questionSort: 0,
          questionPage: 0,
          requiredFlag: 1,
          optionList: [
            {
              surveyId: this.survey.id,
              questionId: 0,
              optionName: "",
              optionDescription: "",
              optionImg: "",
              optionSort: 0,
              requiredFlag: 0,
              fillFlag: 0,
            },
          ],
          addDisable: true,
          updateindex: this.updateindex,
        };
      } else {
        obj = {
          surveyId: this.survey.id,
          questionType: val,
          questionName: "",
          questionDescription: undefined,
          questionSort: 0,
          questionPage: 0,
          requiredFlag: 1,
          optionList: [
            {
              surveyId: this.survey.id,
              questionId: 0,
              optionName: "",
              optionDescription: "",
              optionImg: "",
              optionSort: 0,
              requiredFlag: 0,
              fillFlag: 0,
            },
          ],
          addDisable: true,
          updateindex: this.updateindex,
        };
      }

      if (this.updateindex != 0) {
        this.survey.questionList.splice(this.updateindex, 1, obj);
        this.$nextTick(() => {
          this.$refs[`popup_${this.updateindex}`][0].show(obj);
        });

        if (val == 4) {
          this.$refs[`popup_${this.updateindex - 1}`][0].confirm();
        }
      } else {
        this.survey.questionList.push(obj);
        this.$nextTick(() => {
          this.$refs[`popup_${this.updateindex}`][0].show(obj);
        });
      }

      // 在你添加题目的逻辑中
      setTimeout(() => {
        const container = this.$refs.questionContainer;
        container.scroll({
          top: container.scrollHeight + 1000,
          behavior: "smooth",
        });
      }, 10);
    },
    // 上移
    upQuestion(index) {
      let close = this.closeUpdatebox();
      if (index > 0) {
        if (close) {
          this.$modal.msgWarning(`请完成所有题目编辑再进行移动`);
        } else {
          this.survey.questionList.splice(
            index,
            1,
            ...this.survey.questionList.splice(
              index - 1,
              1,
              this.survey.questionList[index]
            )
          );
        }
      }
    },
    // 下移
    downQuestion(index) {
      let close = this.closeUpdatebox();
      if (index < this.survey.questionList.length - 1) {
        if (close) {
          this.$modal.msgWarning(`请完成所有题目编辑再进行移动`);
        } else {
          this.survey.questionList.splice(
            index,
            1,
            ...this.survey.questionList.splice(
              index + 1,
              1,
              this.survey.questionList[index]
            )
          );
        }
      }
    },
    // 判断是否有未关闭编辑框
    closeUpdatebox() {
      let close = false;
      let arr = Object.values(this.$refs);
      arr.forEach((e) => {
        if (e.length == 1 && e[0].isshow) {
          close = true;
        }
      });
      return close;
    },
    // 获取问卷详情
    async getMsg(id) {
      let obj = {
        surveyId: id,
      };
      let res = await Questionmsg(obj);
      this.survey = res.data;
      console.log(this.survey.questionList, "this.survey.questionList");
      this.survey.questionList.map((i) => {
        if (i.questionType == 3) {
          i.questionNameList = i.questionName
            .split("_______")
            .map((i) => ({ name: i, value: "" }));
        }
        if (i.questionType == 2) {
          i.options = i.optionList.map((i) => ({
            optionId: "",
            answerContent: "",
          }));
        }
        return {
          questionId: i.id,
          ...i,
        };
      });
      this.msgLoading = false;
    },
    // 确认创建
    updateover() {
      if (this.survey.questionList.length == 0) {
        this.$modal.msgError("问卷题目未编辑完成");
        return;
      }
      let shouldContinue = false;
      this.survey.questionList.forEach((item, index) => {
        if (item.questionType == 3) {
          if (item.questionName.indexOf("_______") == -1) {
            if (!shouldContinue) {
              this.$modal.msgWarning(
                `请补全第${index + 1}题内容，填空题没有插入填空符。`
              );
              shouldContinue = true;
            }
            return;
          }
        }
        if (
          (item.questionType == 1 || item.questionType == 2) &&
          (item.optionList.length === 0 ||
            item.optionList.find((i) => i.optionName === ""))
        ) {
          this.$modal.msgWarning(
            `请补全第${index + 1}题内容，选项或标题不能为空。`
          );
          shouldContinue = true;
          return;
        }
      });
      if (!shouldContinue) {
        this.pushQuestion();
        this.$router.push({
          path: `/question/index`,
        });
      }
    },
    // 上传答卷
    async pushQuestion() {
      let res = await confirmQuestion(this.survey);
      if (res.code === 200) {
        this.$modal.msgSuccess("编辑成功");
        this.getMsg(this.survey.id);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .w-e-text {
  min-height: 50px !important;
  height: auto !important;
  overflow-y: unset !important;
}
::v-deep .w-e-text img {
  margin: 0 !important;
}
::v-deep .w-e-text-container {
  min-height: 50px !important;
  height: auto !important;
  z-index: 0 !important;
}
.questiontitle {
  display: flex;
  font-size: 20px;
  font-weight: bold;
  align-items: baseline;
  margin-bottom: 20px;
}
.questiontitle > span > p > input {
  width: 100px;
}
.titspace {
  min-width: 40px;
}

.required::before {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}

.flleft {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 20px;
  font-size: 20px;
}

.noneinput img {
  height: 50px !important;
}
.questionbox {
  margin: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 50px;
}

.tips {
  font-weight: 400;
  color: #808080;
}

.addbtn {
  margin-bottom: 25px;
}

.updatebtns {
  min-width: 300px;
  width: 300px;
  margin-left: 15px;
  margin-bottom: 15px;
  // transform: translateY(-4px);
}
.updatebtnsother {
  min-width: 300px;
  width: 300px;
  margin-left: 15px;
}

.fl {
  display: flex;

  align-items: center;

  justify-content: flex-start;
}

.mr {
  margin-left: 20px;
}

.container {
  width: 85%;
  padding: 0 20px;
  box-sizing: border-box;
  height: calc(100vh - 140px);
  overflow: auto;
}

.bode ::v-deep .el-input__inner {
  border: none;
  font-size: 18px;
  margin-bottom: 20px;
}

.ti ::v-deep .el-input__inner {
  font-size: 25px;
  text-align: center;
}
.typebtns > button:first-child {
  margin-right: 20px;
  margin-bottom: 10px;
}
.content {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  background-color: #fff;
}

.leftNav {
  width: 15%;
  border-right: 1px solid #aaa9a9;
  padding: 20px;
  box-sizing: border-box;
  height: calc(100vh - 140px);
}

.navfl {
  // display: flex;
  margin-bottom: 20px;
  // align-items: center;
}

.navfl > div {
  // display: flex;
  // align-items: center;
  cursor: pointer;
  user-select: none;
}

// .navfl > div > img {
//   width: 20px;
//   margin-right: 5px;
// }

.menu {
  margin-bottom: 20px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  font-size: 18px;
}

.endconfirm {
  position: fixed;
  bottom: 40px;
  right: 100px;
  z-index: 99;
}

.btnitem {
  margin-right: 10px;
}

.titleborder {
  border-bottom: 1px solid #dddddd;
  border-top: 1px solid #dddddd;
  padding-top: 20px;
  margin-bottom: 30px;
}
::v-deep .el-button + .el-button {
  margin-left: 0px !important;
}
::v-deep p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

::v-deep p > img {
  margin: 0px 15px;
}
::v-deep .w-e-menu:last-child {
  visibility: hidden;
  height: 0;
  width: 0;
}
.multTitle {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;

  .gapFill {
    display: flex;
    align-items: baseline;
    // flex-wrap: wrap;
  }
}
.mt_15 {
  margin-top: 15px;
}
.textstyle {
  line-height: 100%;
}
</style>
